<template>
    <el-dialog :visible.sync="is_add_user_dialog_show" title="待加入职员列表" width="800px" :before-close="handleClose">
        <el-form :inline="true" @submit.native.prevent="refreshUserData">
            <el-form-item>
                <el-input placeholder="请输入用户名" v-model="search_user_name">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="refreshUserData">
                    <i class="el-icon-search"></i>
                </el-button>
            </el-form-item>
        </el-form>
        <el-table style="width: 100%;" v-if="no_in_department_user_list" :data="no_in_department_user_list.rows.td" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column v-for="(item, index) in no_in_department_user_list.rows.th" :key="index" :label="item.label" :prop="item.key"></el-table-column>
        </el-table>
        <el-pagination v-if="no_in_department_user_list" @current-change="handleCurrentChange" background :current-page="1" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next, jumper" :total="no_in_department_user_list.total"></el-pagination>
        <div class="department-wait-add-handle">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="setUserIntoDepartment">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import department from "@/api/department.js";

export default {
    name: "department-add-user-list",
    computed: {
        ...mapGetters("department1", [
            "is_add_user_dialog_show",
            "no_in_department_user_list"
        ])
    },
    data() {
        return {
            search_user_name: undefined,
            wait_into_department_list: undefined
        };
    },
    methods: {
        handleClose() {
            this.$store.commit(
                "department1/CHANGE_IS_ADD_USER_DIALOG_SHOW",
                false
            );
        },
        refreshUserData() {
            this.$store.dispatch("department1/getNoInDepartmentUserList", {
                name: this.search_user_name
            });
            this.search_user_name = undefined;
        },
        handleCurrentChange(val) {
            this.$store.dispatch("department1/getNoInDepartmentUserList", {
                pageNumber: val
            });
        },
        handleSelectionChange(val) {
            let arr = [];
            for (let i = 0, len = val.length; i < len; i++) {
                arr.push(val[i].id);
            }
            this.wait_into_department_list = arr;
            arr = null;
        },
        setUserIntoDepartment() {
            department.setUserIntoDepartment(
                { ids: this.wait_into_department_list }
            ).then(res => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                })
                this.$store.dispatch("department1/getDepartmentUserList", { name: undefined });
                this.$store.dispatch('department1/getDepartmentRightDetails')
                this.handleClose()
            })
        }
    }
};
</script>

<style>
.department-wait-add-handle {
    margin-top: 20px;
    text-align: center;
}
</style>
